import styled from 'styled-components';
import { useEffect, useState } from 'react';
import { Table, Space, Card, Drawer, Button, Tag } from "antd";
import { Tool, toolGetTools } from '@/services/local';
import { rrg01FetchToolList } from '@/services';

export const ToolsPage = () => {

    const [loading, setLoading] = useState<boolean>(false);

    const [versionOpen, setVersionOpen] = useState<boolean>(false);

    const [editOpen, setEditOpen] = useState<boolean>(false);

    const [sharedObjects, setSharedObjects] = useState<Array<Tool>>([]);

    const [selected, setSelected] = useState<Tool | null>(null);

    const [page, setPage] = useState<number>(1);

    const [pageSize, setPageSize] = useState<number>(10);

    const [total, setTotal] = useState<number>(0);

    const columns = [
        {
            title: '标识',
            dataIndex: 'identifier',
            key: 'identifier',
            width: '140px',
            ellipsis: true,
        },
        {
            title: '类型',
            dataIndex: 'objectType',
            key: 'objectType',
            width: '90px',
            ellipsis: true,
            render: (text, record, index) => {
                if (text === 'DOMAIN') {
                    return '域';
                }
                return text;
            }
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: '操作',
            key: '操作',
            render: (_, record, index) => {
                return (
                    <Space size="middle" key={record.identifier + index}>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {
                                setSelected(record);
                                setEditOpen(true);
                            }}
                        >编辑</Button>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {
                                setSelected(record);
                                setVersionOpen(true);
                            }}
                        >版本</Button>
                    </Space>
                );
            }
        },
    ];

    const request = async (page: number, pageSize: number) => {
        setLoading(true);
        const { total, data } = await toolGetTools();
        console.log(data);
        setSharedObjects(data);
        setTotal(total);
        setLoading(false);
    };

    useEffect(() => {
        request(page, pageSize);
    }, [page, pageSize]);

    return (
        <Container>
            <StyledCard
                title={'我的分享'}
                extra={[
                    <Button onClick={async () => {
                        let res = await rrg01FetchToolList();
                    }}>同步工具</Button>
                ]}
            >
                <Table
                    bordered
                    loading={loading}
                    rowKey={'identifier'}
                    pagination={{
                        showSizeChanger: true,
                        total: total,
                        current: page,
                        pageSize: pageSize,
                        onChange: (page, pageSize) => {
                            setPage(page);
                        },
                        onShowSizeChange: (current, size) => {
                            setPageSize(size);
                        }
                    }}
                    dataSource={sharedObjects} columns={columns} />
            </StyledCard>
            <Drawer
                title="版本信息"
                onClose={() => {
                    setVersionOpen(false);
                }}
                width={'calc(100% - 270px)'}
                destroyOnClose={true}
                open={versionOpen}>
            </Drawer>
            <Drawer
                title="编辑"
                onClose={() => {
                    setEditOpen(false);
                }}
                width={'calc(100% - 270px)'}
                destroyOnClose={true}
                open={editOpen}>
            </Drawer>
        </Container>
    );
}


const Container = styled.div`
    width: 100%;
    height: 100%;
    padding:20px;
    padding-top:30px;
`;

const StyledCard = styled(Card)`
    width: 100%;
    height: 100%;
`